import React, { useContext, useMemo } from 'react';
import { NeedControllerContext } from '../common';
import { Tabs } from 'antd';
import Cls from 'classnames';
import { DetailInfoCenterViewMainOA } from './DetailInfoCenterViewMainOA';
import stylesOA from '../common/stylesOA.less';
import { DetailCheckListViewOA } from './DetailCheckListViewOA';
import { DetailCenterFlowImageView } from './DetailCenterFlowImageView';

export const DetailInfoCenterViewOA: React.FC = () => {
  /** 获取上下文 */
  const { styleFixCls, needDetailInfo } = useContext(NeedControllerContext);

  /** tabs的子页面 */
  const tabsItemMemo = useMemo(() => {
    let itemConfit: any[] = [
      {
        label: '申请单',
        key: needDetailInfo?.id || '1',
        children: <DetailInfoCenterViewMainOA />,
      },
      {
        label: '办理意见',
        key: 'oaDetail-flowHanle',
        children: <DetailCheckListViewOA />,
      },
      {
        label: '流程跟踪',
        key: needDetailInfo?.workflowID || '3',
        children: <DetailCenterFlowImageView />,
      },
    ];

    return needDetailInfo?.id ? itemConfit : [];
  }, [needDetailInfo]);

  return (
    <div className={Cls(`${styleFixCls}infoViewOA-centerBox`, stylesOA['need-tabsStyle'], 'purchase-stylesOA-theme')}>
      <Tabs items={tabsItemMemo} type="card" destroyInactiveTabPane={true} />
    </div>
  );
};
